<template>
  <div v-loading="loading" class="app-container">
    <el-table :data="roleList" size="medium" border stripe highlight-current-row>
      <el-table-column label="组名称" align="center" prop="role_name"/>
      <el-table-column label="创建者" align="center" prop="create_user"/>
      <el-table-column label="最近修改者" align="center" prop="update_user"/>
      <el-table-column prop="create_time" label="创建时间" align="center"/>
      <el-table-column prop="update_time" label="最近修改时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEditAuth(scope.row)">编辑权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-menu-dialog :visible="displayEditDialog" :role-id="currentRoleId" @close="displayEditDialog = false"/>
    <!-- <pagination :total="pageTotal" :current-page.sync="page" :limit="10" layout="prev, pager, next, jumper" class="hidden-xs-only" @pagination="getList"/>
    <pagination :total="pageTotal" :current-page.sync="page" :limit="10" small layout="prev, pager, next" class="hidden-sm-and-up" @pagination="getList"/> -->
  </div>
</template>

<script>
import config from '@/utils/config.js'
import Pagination from '@/components/Pagination'
import { getRoleList } from '@/api/user'
import editMenuDialog from './editMenuDialog'

export default {
  components: { Pagination, editMenuDialog },
  data() {
    return {
      loading: false,
      page: 1,
      userInfo: null,
      config,
      pageTotal: 0,
      activityYear: null,
      activityTerm: null,
      activityType: null,
      userSelAccount: '',
      userSelType: 1,
      displayEditDialog: false,
      currentRoleId: '',

      props: {
        value: 'label',
        children: 'cities'
      },
      roleList: []
    }
  },
  created() {
    this.userInfo = this.$store.getters.userInfo
    this.getList()
  },
  methods: {
    getList(data) {
      this.loading = true
      getRoleList()
        .then(res => {
          this.roleList = res.data
          this.pageTotal = res.total || 0
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },
    handleEditAuth(row) {
      this.currentRoleId = row.role_id.toString()
      this.displayEditDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.descCount {
  font-size: 14px;
  color: #5e6d82;
  margin: 0;
  span {
    color: red;
  }
}
.name-search {
  width: 280px;
  margin-bottom: 10px;
  vertical-align: middle;
  .el-select {
  width: 80px;
}
}
@media screen and (max-width: 370px) {
  .pagination-container.hidden-sm-and-up {
    padding: 0;
  }
}
</style>
